<template>
  <div>
    <el-dialog :visible.sync="dialogFormVisible" top="10vh">
      <div class="content">
        <el-form ref="subform1" :model="form" :rules="rules">
          <el-form-item :label="labelName" :label-width="formLabelWidth" prop="adName">
            <el-input
              v-model="form.adName"
              auto-complete="off"
              class="form"
              :disabled="isDisabled"
            />
          </el-form-item>
          <!-- 营销位置选择 -->
          <el-form-item
            label="营销位位置"
            :label-width="formLabelWidth"
            prop="positionType"
            :hidden="markHidden"
          >
            <el-select
              v-model="form.positionType"
              placeholder="请选择营销位位置"
              class="form"
              @change="changeMark"
            >
              <el-option
                v-for="item in markData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- 会员营销位置选择 -->
          <el-form-item
            label="营销位位置"
            :label-width="formLabelWidth"
            prop="positionType"
            :hidden="vipMarkHidden"
          >
            <el-select
              v-model="form.positionType"
              placeholder="请选择营销位位置"
              class="form"
              @change="changeVipMark"
            >
              <el-option
                v-for="item in vipMarkData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- 省份选择 -->
          <el-form-item
            label="选择省份"
            :label-width="formLabelWidth"
            prop="provinceId"
            :hidden="provinceHidden"
          >
            <el-select v-model="form.provinceId" placeholder="请选择" class="form" @change="changePro">
              <el-option
                v-for="item in provinceData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="跳转类型"
            :label-width="formLabelWidth"
            prop="jumpType"
            :hidden="jumpTypeHidden"
          >
            <el-select
              v-model="form.jumpType"
              placeholder="请选择跳转位置"
              class="form"
              @change="changeType"
            >
              <el-option
                v-for="item in typeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="选择项目"
            :label-width="formLabelWidth"
            prop="projectId"
            :hidden="proHidden"
          >
            <el-select v-model="form.projectId" placeholder="请选择项目" class="form">
              <el-option
                v-for="item in projectData"
                :key="item.id"
                :label="item.groupProjectName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="选择礼包"
            :label-width="formLabelWidth"
            prop="goodsId"
            :hidden="goodsHidden"
          >
            <el-select v-model="form.goodsId" placeholder="请选择礼包" class="form">
              <el-option
                v-for="item in goodsData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="跳转链接"
            :label-width="formLabelWidth"
            prop="jumpUrl"
            :hidden="urlHidden"
          >
            <el-input v-model="form.jumpUrl" :disabled="isDisabled" class="form" />
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
            <el-input-number
              v-model="form.sort"
              :disabled="isDisabled"
              :min="1"
              style="width:150px; margin-right:16px; margin-bottom:10px;"
            />
          </el-form-item>

          <el-form-item :label="labelImage" :label-width="formLabelWidth" :hidden="mHidden">
            <el-input v-model="imageTitle" :disabled="true" class="form" />
          </el-form-item>
          <!-- 添加展示图 -->
          <el-form-item label="添加展示图" :label-width="formLabelWidth" prop="dialogImageUrl">
            <el-upload
              action="https://mpingweb.yuepinyuemei.com/api/upload"
              :data="{
                dirPath: 'authentication',
                upload_status: true }"
              :multiple="false"
              :limit="1"
              list-type="picture-card"
              :on-remove="handleRemove"
              :on-success="upload_main"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="common.img_url+img_main" alt />
            </el-dialog>
            <img width="20%" :src="common.img_url+form.adPicture" alt />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="closeMask">取 消</el-button>
        <el-button v-if="!isDisabled&&infos&&!infos.id" type="primary" plain @click="submitInfo">确 定</el-button>
        <el-button v-if="!isDisabled&&infos&&infos.id" type="primary" plain @click="resetInfo">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { provinceList } from "../../api/province";
import { addAd, updateAd } from "../../api/adv";
import { provinceProject } from "../../api/project";
import { appType } from "../../utils/constanst";
import { getGoodsList } from "../../api/goods";
export default {
  props: {
    isHidden: {
      type: Boolean,
      default: false,
    },
    isType: {
      type: Number,
      default: "",
    }, // 传过来的信息-类型编号标记 //0-轮播图    7- 新鲜事  12-营销位
    detailInfo: {
      id: "",
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formLabelWidth: "120px",
      markHidden: true, // 营销位选择框是否隐藏-初始值：隐藏
      vipMarkHidden: true, // 会员营销位选择框是否隐藏-初始值：隐藏
      mHidden: false, // 营销位图片提示-初始值：显示
      //
      provinceHidden: false, // 省份选择器-初始值：显示
      jumpTypeHidden: false, // 跳转类型选择-初始值：显示
      goodsHidden: true, // 礼包选择框是否隐藏-初始值：隐藏
      proHidden: true, // 项目详情选择框是否隐藏-初始值：隐藏
      urlHidden: true, // 跳转链接输入框是否隐藏-初始值：隐藏
      //
      labelName: "名称", // 名称输入框-初始值
      labelImage: "", // 图片提示框-初始值
      imageTitle: "", // 图片提示信息
      infos: this.detailInfo, // 传过来的信息
      form: {
        positionType: undefined, // 营销位置-默认显示
        adName: undefined, // 名称
        jumpType: null, // 跳转类型
        jumpUrl: null, // 跳转链接
        provinceId: undefined, // 地址id
        projectId: "", // 项目id
        goodsId: "", // 礼包id
        adPicture: undefined, // 图片
        sort: 0, // 排序
        vipMark: undefined,
      },
      provinceData: [], // 省份list
      projectData: [], // 项目list
      goodsData: [], // 礼包list
      typeData: [
        { id: 0, name: "会员卡" },
        { id: 1, name: "项目详情" },
        { id: 2, name: "跳转链接" },
        { id: 3, name: "礼包详情" },
      ], // 跳转类型list
      markData: [
        { id: 1, name: "左上" },
        { id: 2, name: "左下" },
        { id: 3, name: "中下" },
        { id: 4, name: "右下" },
        { id: 5, name: "右2" },
        { id: 6, name: "右1" },
      ], // 营销位位置list
      vipMarkData: [
        { id: 9, name: "下1" },
        { id: 10, name: "下2" },
      ], // 会员营销位位置list
      dialogVisible: false,
      img_main: undefined,
      dialogFormVisible: this.isHidden, // 是否显示弹出框
      // showAddMask:false // 是否显示
      dialogImageUrl: "",
      rules: {
        adName: [{ required: true, message: "请输入名称", trigger: "blur" }],
        positionType: [
          {
            required: true,
            message: "请选择位置",
            trigger: "blur",
          },
        ],
        provinceId: [
          {
            required: true,
            message: "请选择地址",
            trigger: "blur",
          },
        ],
        jumpType: [
          {
            required: true,
            message: "请选择跳转类型",
            trigger: "blur",
          },
        ],
        jumpUrl: [
          {
            required: true,
            message: "请输入跳转链接",
            trigger: "blur",
          },
        ],
        projectId: [
          {
            required: true,
            message: "请选择项目",
            trigger: "blur",
          },
        ],
        goodsId: [
          {
            required: true,
            message: "请选择礼包",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "请输入排序",
            trigger: "blur",
          },
        ],
        dialogImageUrl: [
          {
            required: true,
            message: "图片不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    dialogFormVisible() {
      this.$emit("checkMask", this.dialogFormVisible);
    },
  },
  created() {
    // 正式版省份id 全国-华视0 华悦36 plus71
    if (appType === 2) {
      this.form.provinceId = 0;
    }
    if (appType === 3) {
      this.form.provinceId = 36;
    }
    if (appType === 4) {
      this.form.provinceId = 71;
    }
  },
  mounted() {
    // 获取省份
    provinceList({})
      .then((res) => {
        // this.form.province = res.data.data.list
        this.provinceData = res.data.data.list;
      })
      .catch((res) => {
        this.$message.error("网络连接错误，请稍后再试");
      });

    // 获取礼包列表
    getGoodsList({
      pageSize: 999,
      pageNum: 1,
      status: 1, // 上架
    })
      .then((res) => {
        this.goodsData = res.data.data.list;
      })
      .catch((res) => {
        this.$message.error("网络连接错误，请稍后再试");
      });

    // 0-广告位/轮播图  1- 1+5营销位 左上
    // 2- 1+5营销位 左下   3 -1+5营销位 中下    4 -1+5营销位 右下
    //  5- 1+5营销位 右2    6- 1+5营销位 右1
    // 7- 新鲜事
    // 8- 会员轮播图
    // 9- 会员营销位 下1  10- 会员营销位 下2
    // 11会员营销位-再选择位置 12营销位-再选择位置
    if (this.isType === 0) {
      this.labelName = "轮播图名称";
      this.labelImage = "轮播图尺寸";
      this.imageTitle = "356px*180px";
    }
    if (this.isType === 1) {
      this.labelImage = "营销图尺寸";
      this.imageTitle = "225px*115px";
    }
    if (this.isType === 2 || this.isType === 3 || this.isType === 4) {
      this.labelImage = "营销图尺寸";
      this.imageTitle = "110px*120px";
    }
    if (this.isType === 5 || this.isType === 6) {
      this.labelImage = "营销图尺寸";
      this.imageTitle = "110px*56px";
    }
    if (this.isType === 7) {
      this.labelName = "新鲜事名称";
      this.labelImage = "新鲜图尺寸";
      this.imageTitle = "375px*210px";
    }
    if (this.isType === 8) {
      this.labelName = "会员轮播名称";
      this.provinceHidden = true; // 省份选择隐藏
      this.jumpTypeHidden = true; // 跳转选择隐藏
      this.urlHidden = false; // 跳转链接输入框显示
      this.labelImage = "会员轮播尺寸";
      this.imageTitle = "343px*112px";
    }
    if (this.isType === 11) {
      this.labelName = "会员营销名称";
      this.provinceHidden = true; // 省份选择隐藏
      this.jumpTypeHidden = true; // 跳转选择隐藏
      this.urlHidden = false; // 跳转链接输入框显示
      this.vipMarkHidden = false; // 选择位置显示
      this.labelImage = "营销图尺寸";
      this.imageTitle = "168px*112px";
    }
    if (this.isType === 12) {
      this.labelName = "营销位名称";
      this.markHidden = false; // 营销位选择-显示
      this.labelImage = "营销图尺寸";
      this.imageTitle = "225px*115px";
    }
    if (this.isType === 12 && this.form.positionType !== undefined) {
      if (this.form.positionType === 1) {
        this.labelImage = "营销图尺寸";
        this.imageTitle = "225px*115px";
      }
      if (
        this.form.positionType === 2 ||
        this.form.positionType === 3 ||
        this.form.positionType === 4
      ) {
        this.labelImage = "营销图尺寸";
        this.imageTitle = "110px*120px";
      }
      if (this.form.positionType === 5 || this.form.positionType === 6) {
        this.labelImage = "营销图尺寸";
        this.imageTitle = "110px*56px";
      }
    }
    if (this.isType === 12 && this.form.positionType === undefined) {
      this.mHidden = true;
    }

    // 说明是查看或者编辑 而不是添加
    if (this.infos && this.infos.id) {
      // 编辑状态-获取该对象中省份对应的项目
      provinceProject({
        id: this.infos.provinceId,
      })
        .then((res) => {
          this.form.project = res.data.data;
          this.projectData = res.data.data;
        })
        .catch((res) => {
          this.$message.error("网络连接错误，请稍后再试");
        });
      // 赋值
      this.form.adName = this.infos.adName;
      this.form.adPicture = this.infos.adPicture;
      this.form.jumpUrl = this.infos.jumpUrl;
      this.form.provinceId = this.infos.provinceId;
      this.form.projectId =
        this.infos.jumpUrl.indexOf("id:") === 0
          ? Number(this.infos.jumpUrl.substr(3, this.infos.jumpUrl.length - 3))
          : undefined;
      this.form.positionType =
        this.infos.positionType === undefined
          ? undefined
          : this.infos.positionType;
      this.form.jumpType =
        this.infos.jumpUrl === "card:1"
          ? 0
          : this.infos.jumpUrl.indexOf("id:") === 0
          ? 1
          : 2;
      this.form.sort = this.infos.sort;
      // 编辑状态 -跳转类型
      this.changeType(this.form.jumpType, 1);
    }
  },
  methods: {
    // 省份选择
    changePro(item) {
      this.form.provinceId = item;
      provinceProject({
        id: item,
      })
        .then((res) => {
          this.form.project = res.data.data;
          this.projectData = res.data.data;
        })
        .catch((res) => {
          this.$message.error("网络连接错误，请稍后再试");
        });
      this.form.projectId = ""; // 重置项目选择
    },
    // 跳转类型
    changeType(item, num) {
      this.form.jumpType = item;
      if (item === 0) {
        // 会员卡
        this.proHidden = true; // 项目详情选择框是否隐藏
        this.urlHidden = true; // 跳转链接输入框是否隐藏
        this.goodsHidden = true;
      }
      if (item === 1) {
        // 项目详情
        this.proHidden = false;
        this.goodsHidden = true;
        this.urlHidden = true;
        if (num !== 1) {
          this.form.projectId = undefined;
        }
      }
      if (item === 2) {
        // 跳转链接
        this.urlHidden = false;
        this.proHidden = true;
        this.goodsHidden = true;
        if (num !== 1) {
          this.form.jumpUrl = null;
        }
      }
      if (item === 3) {
        // 礼包
        this.goodsHidden = false;
        this.proHidden = true;
        this.urlHidden = true;
        if (num !== 1) {
          this.form.goodsId = undefined;
        }
      }
    },
    // 营销位位置选择
    changeMark(item) {
      this.form.positionType = item;
      this.mHidden = false;
      if (item === 1) {
        this.labelImage = "营销图尺寸";
        this.imageTitle = "225px*115px";
      }
      if (item === 2 || this.isType === 3 || item === 4) {
        this.labelImage = "营销图尺寸";
        this.imageTitle = "110px*120px";
      }
      if (item === 5 || item === 6) {
        this.labelImage = "营销图尺寸";
        this.imageTitle = "110px*56px";
      }
    },
    // 会员营销位位置选择
    changeVipMark(item) {
      this.form.vipMark = item;
      this.form.positionType = item;
    },

    handleRemove() {
      this.img_main = "";
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    closeMask() {
      this.$refs["subform1"].resetFields();
      this.dialogFormVisible = false;
      this.$emit("checkMask", this.dialogFormVisible);
    },

    // 修改
    resetInfo() {
      this.urlTyle(this.form.jumpUrl);
      // 发请求 修改
      if (this.checkInfo()) {
        updateAd({
          id: this.infos.id,
          adName: this.form.adName,
          adPicture: this.img_main,
          jumpUrl: this.urlTyle(this.form.jumpUrl),
          provinceId: this.form.provinceId,
          positionType: this.form.positionType, //
          sort: this.form.sort,
        })
          .then((res) => {
            if (res.data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.$emit("refresh", {});
            } else {
              this.$message.error(res.data.msg);
            }
            this.closeMask();
          })
          .catch((res) => {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          });
      } else {
        // 弹出错误框
        this.$message({
          showClose: true,
          message: "请填写必要参数",
          type: "error",
        });
      }
    },

    // 添加
    submitInfo() {
      this.urlTyle(this.form.jumpUrl); // 调用跳转类型转换
      // 提交表单 隐藏弹窗
      if (this.checkInfo()) {
        // 位置赋值
        if (this.form.positionType === undefined) {
          this.form.positionType = this.isType;
        }
        addAd({
          adName: this.form.adName,
          adPicture: this.img_main,
          jumpUrl: this.urlTyle(this.form.jumpUrl),
          sort: parseInt(this.form.sort),
          positionType: this.form.positionType, //
          provinceId: this.form.provinceId,
        })
          .then((res) => {
            if (res.data.code === 7001) {
              this.$message.error(res.data.msg);
            } else {
              this.$message({
                showClose: true,
                message: "添加" + res.data.msg,
                type: "success",
              });
              this.$emit("refresh", {});
            }
            this.closeMask();
          })
          .catch((res) => {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          });
      } else {
        // 弹出错误框
        this.$message({
          showClose: true,
          message: "请填写必要参数",
          type: "error",
        });
      }
    },

    // 检查参数
    checkInfo() {
      if (
        (this.isType === 11 || this.isType === 12) &&
        this.form.positionType === undefined
      ) {
        return false;
      }
      // 图片
      if (!this.img_main) {
        this.img_main = this.form.adPicture;
      }
      // 跳转类型不可为空
      if (
        ((this.isType >= 0 && this.isType <= 7) || this.isType === 12) &&
        this.form.jumpType === null
      ) {
        return false;
      }
      // 项目选择不可为空
      if (this.form.jumpType === 1) {
        return this.form.projectId !== undefined;
      }
      // 跳转链接不可为空
      if (this.form.jumpType === 2) {
        return this.form.jumpUrl !== null;
      }
      // 礼包不可为空
      if (this.form.jumpType === 3) {
        return this.form.goodsId !== undefined;
      }
      return !(!this.form.adName || !this.img_main);
    },

    // 跳转类型与最终赋值拼接
    urlTyle(e) {
      let jumpUrl = e;
      // 跳转类型-会员卡
      if (this.form.jumpType === 0) {
        jumpUrl = "card:1";
      }
      // 跳转类型-项目详情
      if (this.form.jumpType === 1) {
        jumpUrl = "id:" + this.form.projectId;
      }
      // 跳转类型-url
      if (this.form.jumpType === 2) {
        jumpUrl = this.form.jumpUrl;
      }
      // 跳转类型-礼包
      if (this.form.jumpType === 3) {
        jumpUrl = "goods:" + this.form.goodsId;
      }
      return jumpUrl;
    },

    upload_main(res) {
      this.img_main = res.data;
    },
  },
};
</script>
<style scoped>
.content {
  padding-right: 1%;
  height: 470px;
  max-height: 480px;
  overflow: auto;
  box-sizing: border-box;
}
.form {
  width: 400px;
  margin-right: 16px;
  margin-bottom: 10px;
}
</style>
